﻿@using Microsoft.AspNetCore.Components.Forms
<div class="card">
    <div class="card-body">
 
        <EditForm Model="@CurrentField" OnValidSubmit="Save">
            <DataAnnotationsValidator />
            <ValidationSummary />
            <fieldset>
                <div>
                    <label>@Localizer["name"]</label>
                    <input type="text" @bind="CurrentField.Title" placeholder="facebook" />
                </div>
                <div>
                    <label>@Localizer["content"]</label>
                    <input type="text" @bind="CurrentField.Content" placeholder="https://your.facebook.page.com" />
                </div>
                <div class="input-group save-profile">
                    <button type="submit" class="btn btn-primary btn-main">@Localizer["save"]</button>
                </div>
            </fieldset>
        </EditForm>

        @if (SocialFields.Any())
        {
            <ul class="bf-list bf-posts-list d-block" aria-label="drafts">
                @foreach (var field in SocialFields)
                {
                    <li class="bf-list-item d-flex align-items-center">
                        <span class="bf-list-social-icon">
                            <i class="fa @field.Icon" aria-hidden="true"></i>
                        </span>
                        <span class="bf-list-item-link">@field.Title</span>

                        <a href="#" class="bf-list-item-status bf-list-item-status-link ml-auto">
                            @field.Rank
                        </a>

                        <a href="#" class="bf-list-item-status bf-list-item-status-link ml-auto" @onclick="(() => RankField(field.Id, true))" @onclick:preventDefault>
                            <i class="fa fa-arrow-up"></i>
                        </a>
                        <a href="#" class="bf-list-item-status bf-list-item-status-link ml-auto" @onclick="(() => RankField(field.Id, false))" @onclick:preventDefault>
                            <i class="fa fa-arrow-down"></i>
                        </a>

                        <a href="#" target="_blank" class="bf-list-item-status bf-list-item-status-link ml-auto btn-remove" @onclick="(() => RemoveField(field.Id))" @onclick:preventDefault>
                            <i class="fa fa-times"></i>
                        </a>
                    </li>
                }
            </ul>
        }
        else
        {
            <div class="notfound" style="margin-left: 20px">@Localizer["empty"]</div>
        }
    </div>
</div>